<template>
  <!-- 表头代码已省略 -->
  <div class="seamlessRolling">
    <vue-seamless-scroll :data="msgData" :class-option="classOption">
      <el-row class="list-row" v-for="(item, index) in msgData" :key="index">
        <el-col :span="3">
          <p class="circle-nos">{{ index + 1 }}</p>
        </el-col>
        <el-col :span="6">
          <p class="digit">{{ item.carNo }}</p>
        </el-col>
        <el-col :span="4">
          <p class="digit">{{ item.mount }}</p>
        </el-col>
        <el-col :span="6">
          <p class="digit">{{ item.title }}</p>
        </el-col>
        <el-col :span="4">
          <p class="digit">{{ item.title1 }}</p>
        </el-col>
      </el-row>
    </vue-seamless-scroll>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      msgData: [
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
        {
          carNo: "牡丹区",
          mount: "31",
          title: "209",
          title1: "89.3%",
        },
      ],
    };
  },
  // 计算属性 类似于data概念
  computed: {
    classOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
};
</script>
<style scoped>
.seamlessRolling {
  margin: 0 auto;
  /* 列表滚动的宽度 */
  width: 400px;
  /* //列表滚动的高度 */
  height: 280px;
  overflow: hidden;
}
</style>
